<template>
  <div class="box">
    <div>{{ obj.name }}</div>
    <h3>{{ age > 18 ? '成年' : '未成年' }}</h3>
    <h4>
      {{
        num[0].toUpperCase() +
        num.substring(1, 5) +
        num[6].toUpperCase() +
        num.substring(7)
      }}
    </h4>
    <h3>{{ arr }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 12,
      name: 'zs',
      obj: { name: '李四' },
      num: 'hello world',
      arr: [213, 34, 534],
    }
  },
}
</script>

<style scoped lang="less">
@ww: 20px;

.box {
  color: hotpink;
  font-size: @ww;
  font-size: 33px;
  font-weight: 700;
  .wawa {
    color: skyblue;
    font-weight: 700;
    font-size: @ww*1.5;
  }
}
</style>
